<template>
	<el-dialog :title="title" v-model="drawer"  :append-to-body="true" @close="close">
		<el-form :inline="true" :model="search" size="small" ref="searchForm">
				<el-form-item label="试卷名称:" >
					<el-input placeholder="请输入试卷名称" v-model="search.name" @change="filterSubmit" clearable></el-input>
				</el-form-item>
			</el-form>
		<div class="table-list">
		  <el-table :data="list" size="small" style="margin-top:10px;" @selection-change="handleSelectionChange" ref="multipleTableRef">
			  <el-table-column type="selection" width="55" />
			  <el-table-column label="名称" prop="name"></el-table-column>
                <el-table-column label="状态" prop="state">
                    <template #default="scope">
                        <el-switch size="small" v-model="scope.row.state" :active-value="1" :inactive-value="0"
                            :active-text="scope.row.state == 1 ? '开启' : '关闭'"></el-switch>
                        <!-- @change="changeStatus(scope.row)" -->
                    </template>
                </el-table-column>
                <el-table-column label="备注" prop="descs"></el-table-column>
                <el-table-column label="发布时间" prop="createTime"></el-table-column>
		    <el-table-column label="操作" fixed="right" width="180px">
		      <template #default="scope">
		        <el-button type="primary" link @click="selectOne(scope.row)" size="small">选择</el-button>
		      </template>
		    </el-table-column>
		  </el-table>
		  <div class="page-block">
		    <el-pagination
		      v-model:currentPage="current"
		      v-model:page-size="page"
		      :page-sizes="[10, 20, 30, 40]"
		      :small="true"
		      :disabled="false"
		      :background="false"
		      layout="total, sizes, prev, pager, next, jumper"
		      :total="total"
		      :hide-on-single-page="true"
		      @size-change="handleSizeChange"
		      @current-change="handleCurrentChange"
		    />
		  </div>
		</div>
	<template #footer>
      <span class="dialog-footer">
        <el-button size="small" @click="close">取消</el-button>
		<el-button size="small" @click="selectBatch" type="primary" v-if="isBatch" :disabled="multipleData.length < 1">确认选择</el-button>
      </span>
    </template>
	</el-dialog>
</template>

<script>
	import {
		computed,
		reactive,
		toRefs,
		ref,
		onMounted,
		watch
	} from 'vue'
	import {
		ElMessage,
		ElTable
	} from 'element-plus'
	import { pageList } from  '/@/api/qn/paper'
	export default {
		name: 'SelectPaper',
		props: {
			dialogDrawer: {
				type: Boolean,
				default: false
			},
			isBatch: {
				type: Boolean,
				default: false
			},
			defaultSearchForm: {
			    type: Object,
			    default() {
			        return {}
			    }
			},
		},
		setup(props, context) {
			const {
				dialogDrawer,
				isBatch,
				defaultSearchForm
			} = toRefs(props)
			const drawer = computed({
				get: () => dialogDrawer.value,
				set: val => {
					context.emit('update:dialogDrawer', val)
				}
			})
			watch(() => dialogDrawer.value,
			    (newVal,oldVal) => {
			        if(newVal){
						// console.log(isBatch.value)
						// state.search = defaultSearchForm.value
						getList()
					}
			    }
			)
			const searchForm = ref()
			const multipleTableRef = ref()
			const state = reactive({
			  activeName:'first',
			  drawerVisible: false,
			  receiveCouponHistoryTitle:'',
			  rowForm:{},
			  search: {
				current: 1,
			   size: 10
			  },
			  classifyList: [],
			  dialogFormVisible: false,
			  form: {},
			  title: '新增规格',
			  list: [],
			  total: 100,
			  current: 1,
			  page: 10,
			  couponTypeOptions: [{
			  		value: 0,
			  		label: '全场赠券',
			  	},
			  	{
			  		value: 1,
			  		label: '会员赠券',
			  	},
			  	{
			  		value: 2,
			  		label: '购物赠券',
			  	},
			  	{
			  		value: 3,
			  		label: '注册赠券',
			  	},
			  	{
			  		value: 4,
			  		label: '商品卷',
			  	}
			  ],
			  useTypeOptions: [{
			  		value: 0,
			  		label: '全场通用',
			  	},
			  	{
			  		value: 1,
			  		label: '指定分类',
			  	},
			  	{
			  		value: 2,
			  		label: '指定商品',
			  	},
			  ],
			  publishStatusOptions: [{
			  		value: 0,
			  		label: '已发布',
			  	},
			  	{
			  		value: 1,
			  		label: '未发布',
			  	}
			  ],
			  preferentialWayOptions: [{
			  		value: 0,
			  		label: '金额',
			  	},
			  	{
			  		value: 1,
			  		label: '折扣',
			  	}
			  ],
			  useTimeTypeOptions: [{
			  		value: 0,
			  		label: '按天',
			  	},
			  	{
			  		value: 1,
			  		label: '按时间区间',
			  	}
			  ],
			  receiveTimeTypeOptions: [{
			  		value: 0,
			  		label: '限时领取',
			  	},
			  	{
			  		value: 1,
			  		label: '不限时',
			  	}
			  ],
			  multipleData:[]
			})
			
			const handleSelectionChange = (val) => {
				let v = []
				for( let data of val){
					v.push(data)
				}
				state.multipleData = v
			}
			const getList = () => {
				pageList(state.search).then(res=>{
					state.list = res.data.records
					state.total =  res.data.total
				})
			}
			const filterSubmit = () => {
				state.search.current = 1
				getList()
			}
			const reset = (formEl) => {
			  state.search = {
			   name: '',
			   current: 1,
			   size: 10,
			  }
			  getList()
			}
			const handleSizeChange = () => {
			  getList()
			}
			const handleCurrentChange = e => {
			  state.current = e
			  getList()
			}
			const close = () => {
				state.multipleData =[]
				context.emit('update:dialogDrawer', false)
			}
			const submitForm = async (formEl) => {}
			const resetForm = (formEl) => {
				if (!formEl) return
				context.emit('update:dialogDrawer', false)
				formEl.resetFields()
			}
			
			const selectBatch =  () => {
				context.emit('onSelectSubmit', state.multipleData)
				multipleTableRef.value.clearSelection()
			}
			const selectOne =  (row) => {
				let v = []
				v.push(row)
				state.multipleData = v
				context.emit('onSelectSubmit', state.multipleData)
				multipleTableRef.value.clearSelection()
			}
			return {
				drawer,
				submitForm,
				resetForm,
				filterSubmit,
				handleSizeChange,
				handleCurrentChange,
				reset,
				getList,
				selectBatch,
				selectOne,
				handleSelectionChange,
				close,
				multipleTableRef,
				...toRefs(state)
			}
		}

	}
</script>

<style>
</style>
